import React from 'react'
import Taro from '@tarojs/taro'
import classNames from 'classnames'

import { View } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
// import LeftIcon from './leftIcon.svg'

import GetTopBarInfo from '@/utils/GetTopBarInfo'
import './index.scss'

interface ICTopBar {
  title?: string
  isHome?: boolean
  showBack?: boolean
  onBackPage?: () => void
  style?: React.CSSProperties
  [key: string]: any
}

/**
 * 公用tabBar
 */
function CTopBar(params: ICTopBar) {
  const {
    showBack = false,
    onBackPage = () => {
      const CurLen = Taro.getCurrentPages().length
      if (CurLen >= 2) {
        Taro.navigateBack()
        return
      }
      Taro.switchTab({ url: '/pages/Home/index' })
    },
    isHome = false,
    title = '',
    style = {},
  } = params
  const { statusBarHeight, TopBarHeight } = GetTopBarInfo()
  console.log('距顶距离', statusBarHeight, '头部高度', TopBarHeight)

  return (
    <View
      className={classNames(['c-top-bar', isHome && 'home-top-bar'])}
      style={{ ...style, paddingTop: `${statusBarHeight}px`, height: `${TopBarHeight}px` }}
    >
      <View className='c-top-bar-left'>
        {showBack && (
          <View className='back' onClick={onBackPage}>
            {/* <Image src={LeftIcon} className='back-icon' /> */}
            <AtIcon value='chevron-left' size='25' color='#000'></AtIcon>
          </View>
        )}
        {params.children}
      </View>
      <View className='c-top-bar-center'>{title}</View>
      <View className='c-top-bar-right' />
    </View>
  )
}

export default React.memo(CTopBar)
